<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提示</title>
</head>
<body>
<div>提示</div>
<div class="you">
<span class="hear">你过来啊</span>
<span class="come">我过来了</span>
</div>
</body>
<style>
    body{
        text-align: center;
    }
    .come{
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: 50%;
        margin-left: -60px;

         /*淡入 - 1秒内从 0% 到 100% 显示: */
        opacity: 0;
        transition: opacity 10s;
    }
    .you:hover .come{
       visibility: visible;
        opacity: 1;
    }
    .you{
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }





</style>
</html>
